<template>
	<view class="wrapper">
		<view class="top">
			<u-navbar title="租金余额" leftIconColor="#fff" leftIconSize="40rpx" :titleStyle="navbarTitleStyle" :bgColor="navbarBgColor" :placeholder="true" :fixed="true">
				<view slot="left"></view>
			</u-navbar>
			<view class="top-box">
				<view class="top-left">
					<view class="top-left-name">
						<image class="top-left-icon" src="@/package-purse/static/images/icon.png" mode="widthFix"></image>
						租金余额(元)
					</view>
					<view class="top-left-amount">{{ info.rent_balance || '0.00' }}</view>
				</view>
				<view class="top-right" @click="handlWithdraw">
					<image class="top-right-btn" src="@/package-purse/static/images/withdraw.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="top-bottom">
				<view class="top-bottom-box">
					<view class="top-bottom-box-name">已收租金(元)</view>
					<view class="top-bottom-box-value">{{ info.receivedRent || '0.00' }}</view>
				</view>
				<view class="top-bottom-box">
					<view class="top-bottom-box-name">待收租金(元)</view>
					<view class="top-bottom-box-value">{{ info.unreceivedRent || '0.00' }}</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main-tabs">
				<u-subsection @change="changeType" :bold="true" activeColor="#333" inactiveColor="#666" :list="typeList" :current="currentType"></u-subsection>
			</view>
			<view class="" v-show="currentType === 0">
				<view class="main-box">
					<view class="main-search">
						<!-- <view class="main-search-left"> -->
						<uni-datetime-picker v-model="datetimerange" @change="handleDateChange" type="daterange" rangeSeparator="至" />
						<!-- </view> -->
						<!-- <view class="main-search-right"> -->
						<u-subsection @change="sectionChange" activeColor="#999" inactiveColor="#999" :list="dataList" :current="current"></u-subsection>
						<!-- </view> -->
					</view>
					<view class="main-box-bottom">
						<view class="main-box-bottom-left">
							总收入:
							<text>+{{ info.total_income }}元</text>
						</view>
						<view class="main-box-bottom-right">总支出:-{{ info.total_expense }}元</view>
					</view>
				</view>
				<view class="main-list">
					<view class="main-list-item" v-for="(item, index) in list" :key="item.id">
						<BalanceCard :item="item" :index="index" @hancleExpand="hancleExpand">
							<view slot="topContent" class="topContent">
								<view class="main-list-item-income">{{ item.scene_text }}</view>
							</view>
							<view slot="num">{{ item.amount }}</view>
							<view slot="boxInfo" v-if="item.product">
								<!-- 					<view class="box-info-item">
									<view class="box-info-item-label">好友昵称</view>
									<view class="box-info-item-value">我是一个农村人</view>
								</view> -->
								<view class="box-info-item">
									<view class="box-info-item-label">商品名称</view>
									<view class="box-info-item-value">{{ item.product.product_name || '' }}</view>
								</view>
								<view class="box-info-item">
									<view class="box-info-item-label">规格</view>
									<view class="box-info-item-value">{{ item.product.product_attr || '' }}</view>
								</view>
								<view class="box-info-item">
									<view class="box-info-item-label">订单金额</view>
									<view class="box-info-item-value">{{ item.product.order_amount || '' }}</view>
								</view>
								<view class="box-info-item">
									<view class="box-info-item-label">预期租金收益</view>
									<view class="box-info-item-value">{{ item.product.income ? `￥${item.product.income}` : '' }}</view>
								</view>
								<view class="box-info-item">
									<view class="box-info-item-label">待收期数/已收期数</view>
									<view class="box-info-item-value">{{ item.product.ready_bill_count || 0 }} / {{ item.product.finish_bill_count || 0 }}</view>
								</view>
								<view class="box-info-item">
									<view class="box-info-item-label">待收租金/已收租金</view>
									<view class="box-info-item-value">{{ item.product.ready_bill_amount || 0 }} / {{ item.product.finish_bill_amount || 0 }}</view>
								</view>
								<view class="box-info-item">
									<view class="box-info-item-label">SN编码</view>
									<view class="box-info-item-value"></view>
								</view>
							</view>
						</BalanceCard>
					</view>
				</view>
				<u-back-top :scroll-top="scrollTop"></u-back-top>
				<u-loadmore
					:status="loadStatus"
					:line="true"
					:loading-text="loadingText"
					:loadmore-text="loadmoreText"
					:nomore-text="nomoreText"
					:error-text="errorText"
					@click-error="retryLoad"
					v-if="list.length > 0"
				/>
				<u-empty marginTop='100' v-if="list.length <= 0" mode="list" text="暂无数据" />
			</view>
			<view class="withdrawalRecord" v-if="currentType === 1">
				<WithdrawalRecord class=""></WithdrawalRecord>
			</view>
		</view>
	</view>
</template>

<script>
import { getDateRangeByType } from '@/utils/common.js';
import BalanceCard from '@/package-purse/components/balanceCard/index.vue';
import { purse } from '@/api';
import createPageScrollLoadMixin from '@/mixins/pageScrollLoadMixin';
import WithdrawalRecord from './components/withdrawalRecord.vue';
export default {
	// 混入滚动加载逻辑
	mixins: [
		createPageScrollLoadMixin(
			purse.rentBalanceLog, // 请求函数
			{
				list_rows: 20,
				resFormat: 1,
				// 为每行数据添加额外属性
				processRow: (row, index) => {
					return {
						time: row.createtime,
						...row,
						// 添加自定义属性
						isExpand: false,
						fold: row.product ? true : false
					};
				}
			} // 配置项
		)
	],
	components: { BalanceCard, WithdrawalRecord },
	data() {
		return {
			info: {
				receivedRent: '0.00', // 已收取租金
				unreceivedRent: '0.00', //未收取租金
				rent_balance: '0.00', //租金余额
				total_income: '0.00', //总收入
				total_expense: '0.00' //总支出
			},
			// navbarBgColor: 'transparent',
			navbarBgColor: '#D80902',
			navbarTitleStyle: {
				fontFamily: 'PingFang SC',
				// fontWeight: 'bold',
				fontSize: '34rpx',
				color: '#fff'
			},
			datetimerange: [],
			dataList: [{ name: '本日' }, { name: '本周' }, { name: '本月' }],
			typeList: [{ name: '收支明细' }, { name: '提现记录' }],
			current: 0,
			currentType: 0,
			defaultParams: {},
			sceneList: [
				{
					name: '进货充值',
					value: 1
				},
				{
					name: '进货支出',
					value: 2
				},
				{
					name: '租金收入',
					value: 3
				},
				{
					name: '租金提现',
					value: 4
				},
				{
					name: '退机',
					value: 5
				},
				{
					name: '转让',
					value: 6
				}
			]
		};
	},
	onLoad() {},
	onReady() {
		this.sectionChange(this.current, false);
	},
	onShow() {
		this.getRentWalletDetail();
	},
	methods: {
		// 获取钱包-租金信息
		async getRentWalletDetail() {
			const res = await purse.rentWallet();
			this.info = res.data;
		},
		chageQueryParams() {
			this.queryParams = {
				start_date: this.datetimerange[0] || '',
				end_date: this.datetimerange[1] || ''
			};
		},
		// 日期范围修改时触发
		handleDateChange(e) {
			this.datetimerange = e;
			this.chageQueryParams();
		},
		getsceneName(value) {
			// 使用find找到第一个匹配的项
			const item = this.sceneList.find((item) => Number(item.value) === value);
			// 如果找到则返回name，否则返回空字符串或其他默认值
			return item ? item.name : '';
		},
		sectionChange(index, inspection = true) {
			if (inspection) {
				if (index === this.current) return;
			}
			this.current = index;
			switch (this.current) {
				case 0:
					this.datetimerange = getDateRangeByType('today');
					break;
				case 1:
					this.datetimerange = getDateRangeByType('week');
					break;
				case 2:
					this.datetimerange = getDateRangeByType('month');
					break;
			}
			console.log('datetimerange', this.datetimerange);
			this.chageQueryParams();
		},
		changeType(index) {
			if (this.currentType === index) return;
			this.currentType = index;
			if (index === 0) {
				this.current = 0;
				this.sectionChange(this.current, false);
				this.refresh();
			}
		},
		hancleExpand(item) {
			const index = this.list.findIndex((v) => v.id === item.id);
			this.list[index].isExpand = !item.isExpand;
		},
		handlWithdraw() {
			uni.navigateTo({
				url: '/package-purse/withdraw/withdraw?type=' + 'rentWithdrawal'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	padding-bottom: 20rpx;
}
.top {
	height: 540rpx;
	padding: 100rpx 50rpx;
	box-sizing: border-box;
	background-image: url('https://yundong-shop.oss-cn-shanghai.aliyuncs.com/2025091422343726dc46640.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;

	&-box {
		display: flex;
		justify-content: space-between;
	}
	&-left {
		&-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
		&-name {
			display: flex;
			font-family: 'PingFang SC';
			font-weight: 500;
			font-size: 24rpx;
			color: #ffffff;
		}
		&-amount {
			margin-top: 20rpx;
			font-family: 'PingFang SC';
			font-weight: 500;
			font-size: 48rpx;
			color: #ffffff;
		}
	}
	&-right {
		padding-top: 50rpx;
		&-btn {
			width: 130rpx;
			height: 52rpx;
		}
	}
	&-bottom {
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		&-box {
			width: 50%;
			box-sizing: border-box;

			&-name {
				font-family: 'PingFang SC';
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;
				opacity: 0.6;
				margin-bottom: 10rpx;
			}
			&-value {
				font-family: 'PingFang SC';
				font-weight: 500;
				font-size: 36rpx;
				color: #ffffff;
			}
		}
	}
}
.main {
	margin-top: 0rpx;
	&-tabs {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		padding: 30rpx 0 0 0;
		::v-deep .u-subsection {
			width: 324rpx !important;
			height: 61rpx !important;
			background: #f4f6f8;
			border-radius: 7rpx;
			position: relative !important;
			z-index: 1;
		}
		::v-deep .u-subsection__item__text {
			font-family: 'Source Han Sans CN' !important;
			// font-weight: 400 !important;
			font-size: 28rpx !important;
		}
		::v-deep .u-subsection__bar {
			background: #fff;
			border-radius: 7rpx;
		}
	}
	&-box {
		background-color: #fff;
		padding: 30rpx;
		&-bottom {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			&-left {
				font-family: 'PingFang SC';
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				text {
					ont-weight: bold;
					font-size: 24rpx;
					color: #ff0000;
				}
			}
			&-right {
				font-family: 'PingFang SC';
				font-weight: bold;
				font-size: 24rpx;
				color: #333333;
			}
		}
	}
	&-search {
		display: flex;
		justify-content: space-between;

		::v-deep .uni-date {
			width: 400rpx;
			height: 60rpx;
			background: #f4f6f8;
			border-radius: 8rpx;
			opacity: 0.99;
			position: relative;
			z-index: 2;
			flex: none;
		}
		::v-deep .uni-date .icon-calendar {
			display: none;
		}
		::v-deep .uni-date .uni-icons {
			display: none;
			// font-size: 24rpx !important;
		}
		::v-deep .uni-date-x--border {
			border: none;
		}
		::v-deep .uni-date-x {
			background-color: transparent;
			align-items: start;
		}
		::v-deep .uni-date__x-input {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;
			line-height: normal;
			height: 60rpx;
			justify-content: center;
		}
		::v-deep .range-separator {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center !important;
			line-height: normal !important;
			height: 60rpx !important;
			justify-content: center !important;
		}
		::v-deep .u-subsection {
			width: 240rpx !important;
			height: 56rpx !important;
			background: #ffffff;
			border-radius: 16rpx !important;
			opacity: 0.99 !important;
			position: relative !important;
			z-index: 1 !important;
		}

		::v-deep .u-subsection__item__text {
			font-family: 'PingFang SC' !important;
			font-weight: 400 !important;
			font-size: 24rpx !important;
			color: #999999 !important;
		}
		::v-deep .u-subsection__bar {
			background: #fff;
			border-radius: 7rpx;
			opacity: 0.99;
		}
	}
	&-list {
		margin-top: 20rpx;
		padding-bottom: 40rpx;
		&-item {
			margin: 20rpx 30rpx;
			.topContent {
				display: flex;
				justify-content: flex-end;
			}
			&-income {
				min-width: 120rpx;
				padding: 10rpx;
				background: rgba(255, 68, 0, 0.1);
				border-radius: 6rpx;
				font-family: 'PingFang SC';
				font-weight: 500;
				font-size: 24rpx;
				color: #ff4603;
				text-align: center;
				box-sizing: border-box;
			}
		}
		.box-info-item {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
		}
	}
}
.withdrawalRecord {
	::v-deep .uni-date {
		width: 400rpx;
		height: 60rpx;
		background: #f4f6f8;
		border-radius: 8rpx;
		opacity: 0.99;
		position: relative;
		z-index: 2;
		flex: none;
	}
	::v-deep .uni-date .icon-calendar {
		display: none;
	}
	::v-deep .uni-date .uni-icons {
		display: none;
		// font-size: 24rpx !important;
	}
	::v-deep .uni-date-x--border {
		border: none;
	}
	::v-deep .uni-date-x {
		background-color: transparent;
		align-items: start;
	}
	::v-deep .uni-date__x-input {
		font-family: 'PingFang SC';
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		display: flex;
		align-items: center;
		line-height: normal;
		height: 60rpx;
		justify-content: center;
	}
	::v-deep .range-separator {
		font-family: 'PingFang SC';
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		display: flex !important;
		align-items: center !important;
		line-height: normal !important;
		height: 60rpx !important;
		justify-content: center !important;
	}
	::v-deep .u-subsection {
		width: 240rpx !important;
		height: 56rpx !important;
		background: #ffffff;
		border-radius: 16rpx;
		opacity: 0.99 !important;
		position: relative !important;
		z-index: 1 !important;
	}

	::v-deep .u-subsection__item__text {
		font-family: 'PingFang SC' !important;
		font-weight: 400 !important;
		font-size: 24rpx !important;
		color: #999999 !important;
	}
	::v-deep .u-subsection__bar {
		background: #fff;
		border-radius: 7rpx;
		opacity: 0.99;
	}
}
</style>
